/*
 * @Author: zeki mini
 * @Date: 2021-04-29 18:35:38
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-29 20:18:56
 * @Description: file information
 */
/**
 * @Author: jipeng.Li
 * @Date: 2021-04-13 11:48:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-13 11:48:21
 * @Description: 加油授权
 */

import React from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { fontColorBlack, fontColorLightGray, mainBgColorLightGray, px2dp } from '@/styles';

const SearchUserView = ({ phoneNumber, onChangeText, placeholder = '请输入获取油卡用户的手机号' }) => {
  return (
    <View style={styles.searchUserContainer}>
      <Text style={styles.searchUserTitle}>输入手机号</Text>
      <View style={styles.phoneNumberWrap}>
        <TextInput
          style={[styles.phoneNumber, { fontSize: px2dp(36), }]}
          placeholder={placeholder}
          placeholderTextColor={fontColorLightGray}
          multiline
          maxLength={11}
          value={phoneNumber}
          underlineColorAndroid='transparent'
          keyboardType='numeric'
          onChangeText={number => {
            onChangeText && onChangeText(number);
          }}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  searchUserContainer: {
    height: px2dp(400),
    justifyContent: 'center',
    paddingHorizontal: px2dp(50)
  },
  searchUserTitle: {
    fontSize: px2dp(48),
    color: fontColorBlack,
    fontWeight: 'bold',
    marginBottom: px2dp(50)
  },
  phoneNumberWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(12),
    paddingHorizontal: px2dp(10),
    paddingVertical: px2dp(20)
  },
  phoneNumber: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    color: fontColorBlack,
  },
});

export default SearchUserView;
